<template>
  <div class="foot-style">
    <van-nav-bar :title="title" fixed left-arrow @click-left="onClickLeft" z-index="999999" />

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list :immediate-check="false" v-model="loading" offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <DailyRecommendation
          v-for="item in latestRecipesList"
          :key="item.id"
          :recommendInfo="item"
          :image="item.imageid"
          :likeNum="item.likeCount"
          :collectionNum="item.collectCount"
          :title="item.name"
          :desc="item.description"
          :userImage="item.authorimageid"
          :userName="item.authorname"
        ></DailyRecommendation>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import request from '@/utils/request/request'
import DailyRecommendation from '@/components/home-view/DailyRecommendation.vue'

export default {
  data() {
    return {
      dataId: '',
      title: '',
      page: 0,
      top: 0,
      isLoading: false,
      loading: false,
      finished: false,
      latestRecipesList: []
    }
  },
  components: {
    DailyRecommendation
  },
  methods: {
    onRefresh() {
      this.id = this.dataId
      this.GainFootlist()
    },
    //滚动加载
    async onLoad() {
      this.GainFootlist()
    },
    async GainFootlist() {
      this.dataId = this.$route.params.id

      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const {
        data: { list: res }
      } = await request({
        url: '/public/getContentsBySubClassid.shtml',
        method: 'post',
        data: {
          id: this.dataId,
          page: this.page
        }
      })
      this.page += 1

      toast.clear()
      if (res.length > 0) {
        res.forEach((item) => {
          this.latestRecipesList.push(item)
        })
        this.loading = false
        this.page++
      } else {
        this.$toast.success('已经全部加载')
        this.finished = true
      }
      this.isLoading = false
    },
    onClickLeft() {
      this.$router.back()
    }
  },
  created() {
    this.title = this.$route.query.title
    if (sessionStorage.getItem('every-data')) {
      let everyData = JSON.parse(sessionStorage.getItem('every-data'))
      if (this.title == everyData.title) {
        this.dataId = everyData.dataId
        this.title = everyData.title
        this.page = everyData.page
        this.latestRecipesList = everyData.latestRecipesList
        this.top = everyData.top
        return
      }
    }
    this.GainFootlist()
  },
  mounted() {
    window.scrollTo(0, this.top)
    document.addEventListener('scroll', () => {
      this.top = window.pageYOffset
    })
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('every-data')
    })
  },
  beforeDestroy() {
    // 需要保存的数据
    let obj = {
      top: this.top,
      dataId: this.dataId,
      title: this.title,
      page: this.page,
      latestRecipesList: this.latestRecipesList
    }
    sessionStorage.setItem('every-data', JSON.stringify(obj))
  }
}
</script>

<style lang="less" scoped>
.foot-style {
  padding-top: 46px;
  /deep/.van-nav-bar__title {
    font-weight: bold;
    color: #555;
    font-size: 18px;
  }

  /deep/.van-icon {
    font-size: 20px;
    color: #555;
    font-weight: bold;
  }
}
</style>
